<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">
                    <span>{{l("Subscription")}}</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <tabset class="tab-container tabbable-line">
                    <tab heading="{{l('SubscriptionInformation')}}" customClass="m-tabs__item">
                        <form class="m-form m-form--label-align-right">
                            <input type="hidden" Name="PaymentPeriodType" value="@tenant.PaymentPeriodType" />
                            <input type="hidden" Name="Gateway" value="@SubscriptionPaymentGatewayType.Paypal" />

                            <div class="form-group m-form__group row">
                                <label class="col-sm-4 control-label m--font-bold">{{l("Edition")}}</label>
                                <div class="col-sm-8">
                                    <p *ngIf="tenant.edition">
                                        {{tenant.edition.displayName}}
                                        <span *ngIf="tenant.edition.isFree" class="m-badge m-badge--success m-badge--wide">{{l("Free")}}</span>
                                        <span *ngIf="tenant.isInTrialPeriod" class="m-badge m-badge--warning m-badge--wide">{{l("Trial")}}</span>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-sm-4 control-label m--font-bold">{{l("SubscriptionStartDate")}}</label>
                                <div class="col-sm-8">
                                    <p>{{ tenant.creationTimeString }}</p>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-sm-4 control-label m--font-bold">{{l("SubscriptionEndDate")}}</label>
                                <div class="col-sm-8">
                                    <p *ngIf="tenant.edition">
                                        <span>{{tenant.subscriptionDateString}}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-sm-4 control-label"></label>
                                <div class="col-sm-8">
                                    <a *ngIf="tenant.edition && !tenant.edition.isFree && !tenant.isInTrialPeriod"
                                       [routerLink]="['/account/extend']" [queryParams]="{ editionPaymentType: editionPaymentType.Extend}" class="btn btn-info">
                                        {{l("Extend")}}
                                    </a>
                                    <a *ngIf="tenant.isInTrialPeriod"
                                       [routerLink]="['/account/buy']" [queryParams]="{editionPaymentType: editionPaymentType.BuyNow, editionId: tenant.edition.id }"
                                       class="btn btn-info">
                                        {{l("BuyNow")}}
                                    </a>
                                    <a *ngIf="tenant.edition && (tenant.edition.isFree || !tenant.edition.isHighestEdition) && !tenant.isInTrialPeriod"
                                       [routerLink]="['/account/select-edition']" class="btn btn-warning">
                                        {{l("Upgrade")}}
                                    </a>
                                </div>
                            </div>
                        </form>
                    </tab>
                    <tab heading="{{l('PaymentHistory')}}" customClass="m-tabs__item">
                        <div class="primeng-datatable-container"
                             [busyIf]="primengTableHelper.isLoading">
                            <p-table #dataTable
                                     (onLazyLoad)="getPaymentHistory($event)"
                                     [value]="primengTableHelper.records"
                                     rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                     [paginator]="false"
                                     [lazy]="true"
                                     [scrollable]="true"
                                     ScrollWidth="100%"
                                     [responsive]="primengTableHelper.isResponsive">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 130px">{{l('Invoice')}}</th>
                                        <th style="width: 150px" pSortableColumn="creationTime">
                                            {{l('ProcessTime')}}
                                            <p-sortIcon field="creationTime"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="editionDisplayName">
                                            {{l('Edition')}}
                                            <p-sortIcon field="editionDisplayName"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="gateway">
                                            {{l('Gateway')}}
                                            <p-sortIcon field="gateway"></p-sortIcon>
                                        </th>
                                        <th style="width: 100px" pSortableColumn="amount">
                                            {{l('Amount')}}
                                            <p-sortIcon field="amount"></p-sortIcon>
                                        </th>
                                        <th style="width: 100px" pSortableColumn="status">
                                            {{l('Status')}}
                                            <p-sortIcon field="status"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="paymentPeriodType">
                                            {{l('Period')}}
                                            <p-sortIcon field="paymentPeriodType"></p-sortIcon>
                                        </th>
                                        <th style="width: 100px">{{l('DayCount')}}</th>
                                        <th style="width: 250px;">{{l('PaymentId')}}</th>
                                        <th style="width: 150px" pSortableColumn="invoiceNo">
                                            {{l('InvoiceNo')}}
                                            <p-sortIcon field="invoiceNo"></p-sortIcon>
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 130px">
                                            <button type="button" class="btn btn-sm btn-primary" (click)="createOrShowInvoice(record.id, record.invoiceNo)">{{l('ShowInvoice')}}</button>
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title">{{l('ProcessTime')}}</span>
                                            <span *ngIf="record.creationTime">{{record.creationTime | momentFormat:'L'}}</span>
                                            <span *ngIf="!record.creationTime">-</span>
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title">{{l('Edition')}}</span>
                                            {{record.editionDisplayName}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title">{{l('Gateway')}}</span>
                                            {{l('SubscriptionPaymentGatewayType_' + record.gateway)}}
                                        </td>
                                        <td style="width: 100px">
                                            <span class="ui-column-title">{{l('Amount')}}</span>
                                            $ {{record.amount | number : '1.2-2'}}
                                        </td>
                                        <td style="width: 100px">
                                            <span class="ui-column-title">{{l('Status')}}</span>
                                            {{l('SubscriptionPaymentStatus_' + record.status)}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title">{{l('Period')}}</span>
                                            {{l('PaymentPeriodType_' + record.paymentPeriodType)}}
                                        </td>
                                        <td style="width: 100px">
                                            <span class="ui-column-title">{{l('DayCount')}}</span>
                                            {{record.dayCount}}
                                        </td>
                                        <td style="width: 250px;">
                                            <span class="ui-column-title">{{l('PaymentId')}}</span>
                                            {{record.paymentId}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title">{{l('InvoiceNo')}}</span>
                                            {{record.invoiceNo}}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{l('NoData')}}
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                             #paginator
                                             (onPageChange)="getPaymentHistory($event)"
                                             [totalRecords]="primengTableHelper.totalRecordsCount"
                                             [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                </span>
                            </div>
                        </div>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
</div>
